<template>
  <Card
    title="职位信息"
  >
    <a-form :form="form" class="role-account-modify-container">
      <a-row :gutter="24">
        <!-- <a-col :span="8">
          <a-form-item label="工号">
            <a-input
              v-decorator="['number', { rules: [{ required: true, message: 'Please input your note!' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="部门">
           <a-select
             v-decorator="[
                'select',
                { rules: [{ required: true, message: 'Please select your country!' }] },
              ]"
              placeholder="Please select a country"
            >
              <a-select-option value="china">
                China
              </a-select-option>
              <a-select-option value="usa">
                U.S.A
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="职级">
            <a-input
              v-decorator="['number2', { rules: [{ required: true, message: 'Please input your note!' }] }]"
            />
          </a-form-item>
        </a-col> -->
        <a-col :span="8">
          <!-- {{ user }}
          {{ user.position }}
          {{ user.roles }} -->
          <a-form-item label="职位">
            <a-input
              v-decorator="[
                'position',
                { initialValue: user.position.toString() }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="权限群组">
            <a-input
              disabled
              :value="user.group | groupsFilter"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="角色">
            <a-input
              v-decorator="[
                'role',
                { initialValue: user.role.toString() }
              ]"
            />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="8">
          <a-form-item label="备注">
            <a-input
              v-decorator="['number2', { rules: [{ required: true, message: 'Please input your note!' }] }]"
            />
          </a-form-item>
        </a-col> -->
      </a-row>
    </a-form>
  </Card>
</template>

<script>
import { Card } from '@/components'
import props from './props'
import form from './form'

export default {
  mixins: [props, form],

  filters: {
    groupsFilter (group) {
      const names = group.map((item) => item.full_name)

      return names.toString()
    },

    toStringFilter (value) {
      return value || ''.toString()
    },
  },

  components: {
    Card,
  },
}
</script>

<style lang="scss">
.role-account-modify-container {
  .ant-form-item {
    // margin-bottom: $margin-xs;
  }
}
</style>
